<template>
  <!--<transition name="picker">-->
    <div class="picker">
      <div class="main-wrapper">
        <ul class="picker-wrapper">
          <li v-for="item in listData" @click="close(item)">{{item.id?item.name:item}}</li>
        </ul>
        <div class="picker-cancel" @click="close(null)">取消</div>
      </div>
    </div>
  <!--</transition>-->
</template>

<script>
    export default {
      name: "picker",
      props: {
        type: {
          type: Number,
          default: 0
        },
        data: {
          type: Array,
          default: null
        }
      },
      data () {
        return {
          listData:[]
        }
      },
      mounted () {
        setTimeout(() => {
          this._initMembers()
        }, 16)
        this.$nextTick(() => {
          this._initMembers()
        })
      },
      methods: {
        _initMembers () {
          if (this.type === 1) {
            let arr = []
            this.data.forEach((item) => {
              arr.push({
                'name': item.name,
                'id': item.id
              })
            })
            this.listData = arr
          } else if (this.type === 0) {
            this.listData = ["--请选择--","自费","定点医保","公费医疗"]
          } else if (this.type === 2) {
            this.listData = ["无就诊卡","添加就诊卡"]
          }
        },
        close (item) {
          this.$emit('openPicker', item)
        }
      }
    }
</script>

<style scoped lang="scss">
  @import "../../../common/sass/mixin";
  .picker{
    /*position: absolute;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    color: #3478f7;
    .main-wrapper{
      position: relative;
      z-index: 9999;
      transition: all 0.3s ease;
      transform: translate3d(0, 0, 0);
      .picker-wrapper{
        margin: 0 17px;
        background-color: #ffffff;
        border-radius: 20px;
        li{
          line-height: 100px;
          border-bottom: 1px solid $borderCor;
          text-align: center;
          @include font-dpr(36px);
          letter-spacing: 2px;
          &:first-child{
          border-top-right-radius: 20px;
          border-top-left-radius: 20px;
        }
          &:last-child{
            border: none;
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 20px;
          }
          &:active{
            background-color: #e8e8e8;
          }
        }
      }
      .picker-cancel{
        margin: 14px 17px 18px 17px;
        line-height: 100px;
        border-radius: 20px;
        background-color: #ffffff;
        text-align: center;
        @include font-dpr(38px);
        &:active{
          background-color: #e8e8e8;
        }
      }
    }
    /*.layer{*/
      /*position: fixed;*/
      /*z-index: 9998;*/
      /*left: 0;*/
      /*right: 0;*/
      /*bottom: 0;*/
      /*height: 100vh;*/
      /*background-color: rgba(0, 0, 0, 0.4);*/
    /*}*/
  }
  .picker-enter-active,.picker-leave-active{
    transition: all 0.3s ease;
  }
  .picker-enter, .picker-leave-to{
    transform: translate3d(0, 100%, 0);
  }
  .picker-leave, .picker-enter-to{
    transform: translate3d(0, 0, 0);
  }
</style>
